<!--
*** Created by zhumin on 2023/09/12.***
*** Description: "单日赛程"
-->
<template>
  <div>
    <common @getGroupData="getGroupData"></common>
    <div :class="['component-style', 'daily']">
      <el-tabs v-model="tabActive" @tab-click="changeTab" type="border-card">
        <el-tab-pane label="十月" name="October">
          <div class="date-button">
            <el-button
              class="date-num"
              :type="item.type"
              v-for="(item, index) in dateList"
              :key="index"
              :disabled="item.flag"
              @click="changeDate(item.value)"
              :round="true"
            >
              {{ item.value }}
            </el-button>
          </div>
          <div class="change-order">
            <div class="order-text">
              <div class="order-date">10月{{ dateActive }}日</div>
              <div class="order-medal">决赛数 （{{ goldData }}）</div>
            </div>
            <el-radio-group v-model="orderType" @change="changeOrderType">
              <el-radio :label="'item'">按项目排序</el-radio>
              <el-radio :label="'date'">按开赛时间排序</el-radio>
            </el-radio-group>
          </div>
          <div v-if="orderType === 'item'">
            <el-collapse v-model="activeItem[activeGroup]">
              <el-collapse-item :name="row.itemName" v-for="(row, index) in itemList" :key="index">
                <template slot="title">
                  <div class="collapse-title">
                    <div class="collapse-title-img" v-if="row.imgUrl">
                      <img :src="row.imgUrl" alt="" />
                    </div>
                    <div>{{ row.itemName }}</div>
                  </div>
                </template>
                <div>
                  <el-table
                    :data="dateScheduleByItem[activeGroup][row.itemCode]"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column prop="BeginTime" label="时间" width="100px"> </el-table-column>
                    <el-table-column label="比赛名称">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.SportItemName + ' ' + scope.row.GameName }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="报表">
                      <template slot-scope="scope">
                        <div class="table-report">
                          <el-row :gutter="24">
                            <el-col
                              :span="24"
                              v-for="(column, index) in scope.row.files"
                              :key="index"
                            >
                              <el-col :span="6">
                                <div
                                  class="report-title"
                                  v-if="dateLine && column.IsXMLNull === '1'"
                                >
                                  <span
                                    @click="
                                      goRoute(
                                        scope.row.SportName,
                                        column.SportFileName,
                                        scope.row.BeginTime,
                                        scope.row.SportItemName + ' ' + scope.row.GameName,
                                        scope.row.VenueName,
                                        column.FilePath,
                                        scope.row.SportItemCode
                                      )
                                    "
                                  >
                                    {{ column.SportFileName }}
                                  </span>
                                </div>
                                <div class="report-title-noclick" v-else>
                                  <el-button type="text" disabled>
                                    <span>{{ column.SportFileName }}</span>
                                  </el-button>
                                </div>
                              </el-col>
                              <el-col :span="3">
                                <template v-if="dateLine && column.IsPDFNull === '1'">
                                  <div
                                    v-if="column.SportFileName !== '名次公告'"
                                    class="report report-url"
                                    @click="gotoUrl(column.FilePath)"
                                  ></div>
                                  <div
                                    v-else
                                    class="rank report-url"
                                    @click="gotoUrl(column.FilePath)"
                                  ></div>
                                </template>
                                <template v-else>
                                  <span v-if="column.SportFileName !== '名次公告'">
                                    <el-button
                                      type="text"
                                      disabled
                                      class="report-noclick"
                                    ></el-button>
                                  </span>
                                  <span v-else>
                                    <el-button
                                      type="text"
                                      disabled
                                      class="rank-noclick"
                                    ></el-button>
                                  </span>
                                </template>
                              </el-col>
                              <el-col :span="6">
                                <div class="official-text" v-if="column.IsOfficial === '1'">
                                  （官方）
                                </div>
                              </el-col>
                            </el-col>
                          </el-row>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="VenueName" label="比赛地点" width="200px">
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div v-else style="margin-top:20px">
            <el-table :data="dateScheduleByDate[activeGroup]" :row-class-name="tableRowClassName">
              <el-table-column prop="BeginTime" label="时间" width="100px"> </el-table-column>
              <el-table-column label="比赛名称">
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.SportName + ' ' + scope.row.SportItemName + ' ' + scope.row.GameName
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="报表">
                <template slot-scope="scope">
                  <div class="table-report">
                    <el-row :gutter="24">
                      <el-col :span="24" v-for="(column, index) in scope.row.files" :key="index">
                        <el-col :span="6">
                          <div class="report-title" v-if="dateLine && column.IsXMLNull === '1'">
                            <span
                              @click="
                                goRoute(
                                  scope.row.SportName,
                                  column.SportFileName,
                                  scope.row.BeginTime,
                                  scope.row.SportItemName + ' ' + scope.row.GameName,
                                  scope.row.VenueName,
                                  column.FilePath,
                                  scope.row.SportItemCode
                                )
                              "
                            >
                              {{ column.SportFileName }}
                            </span>
                          </div>
                          <div class="report-title-noclick" v-else>
                            <el-button type="text" disabled>
                              <span>{{ column.SportFileName }}</span>
                            </el-button>
                          </div>
                        </el-col>
                        <el-col :span="3">
                          <template v-if="dateLine && column.IsPDFNull === '1'">
                            <div
                              v-if="column.SportFileName !== '名次公告'"
                              class="report report-url"
                              @click="gotoUrl(column.FilePath)"
                            ></div>
                            <div
                              v-else
                              class="rank report-url"
                              @click="gotoUrl(column.FilePath)"
                            ></div>
                          </template>
                          <template v-else class="report">
                            <span v-if="column.SportFileName !== '名次公告'">
                              <el-button type="text" disabled class="report-noclick"></el-button>
                            </span>
                            <span v-else>
                              <el-button type="text" disabled class="rank-noclick"></el-button>
                            </span>
                          </template>
                        </el-col>
                        <el-col :span="6">
                          <div class="official-text" v-if="column.IsOfficial === '1'">
                            （官方）
                          </div>
                        </el-col>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="VenueName" label="比赛地点" width="200px"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="十一月" name="November" :disabled="activeGroup === 'perform'">
          <div class="date-button">
            <el-button
              class="date-num"
              :type="item.type"
              v-for="(item, index) in dateList"
              :key="index"
              :disabled="item.flag"
              @click="changeDate(item.value)"
              :round="true"
            >
              {{ item.value }}
            </el-button>
          </div>
          <div class="change-order">
            <div class="order-text">
              <div class="order-date">11月0{{ dateActive }}日</div>
              <div class="order-medal">决赛数 （{{ goldData }}）</div>
            </div>
            <el-radio-group v-model="orderType" @change="changeOrderType">
              <el-radio :label="'item'">按项目排序</el-radio>
              <el-radio :label="'date'">按开赛时间排序</el-radio>
            </el-radio-group>
          </div>
          <div v-if="orderType === 'item'">
            <el-collapse v-model="activeItem[activeGroup]">
              <el-collapse-item :name="row.itemName" v-for="(row, index) in itemList" :key="index">
                <template slot="title">
                  <div class="collapse-title">
                    <div class="collapse-title-img" v-if="row.imgUrl">
                      <img :src="row.imgUrl" alt="" />
                    </div>
                    <div>{{ row.itemName }}</div>
                  </div>
                </template>
                <div>
                  <el-table
                    :data="dateScheduleByItem[activeGroup][row.itemCode]"
                    :row-class-name="tableRowClassName"
                  >
                    <el-table-column prop="BeginTime" label="时间" width="100px"> </el-table-column>
                    <el-table-column label="比赛名称">
                      <template slot-scope="scope">
                        <div>
                          {{ scope.row.SportItemName + ' ' + scope.row.GameName }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="报表">
                      <template slot-scope="scope">
                        <div class="table-report">
                          <el-row :gutter="24">
                            <el-col
                              :span="24"
                              v-for="(column, index) in scope.row.files"
                              :key="index"
                            >
                              <el-col :span="6">
                                <div
                                  class="report-title"
                                  v-if="dateLine && column.IsXMLNull === '1'"
                                >
                                  <span
                                    @click="
                                      goRoute(
                                        scope.row.SportName,
                                        column.SportFileName,
                                        scope.row.BeginTime,
                                        scope.row.SportItemName + ' ' + scope.row.GameName,
                                        scope.row.VenueName,
                                        column.FilePath,
                                        scope.row.SportItemCode
                                      )
                                    "
                                  >
                                    {{ column.SportFileName }}
                                  </span>
                                </div>
                                <div class="report-title-noclick" v-else>
                                  <el-button type="text" disabled>
                                    <span>{{ column.SportFileName }}</span>
                                  </el-button>
                                </div>
                              </el-col>
                              <el-col :span="3">
                                <template v-if="dateLine && column.IsPDFNull === '1'">
                                  <div
                                    v-if="column.SportFileName !== '名次公告'"
                                    class="report report-url"
                                    @click="gotoUrl(column.FilePath)"
                                  ></div>
                                  <div
                                    v-else
                                    class="rank report-url"
                                    @click="gotoUrl(column.FilePath)"
                                  ></div>
                                </template>
                                <template v-else>
                                  <span v-if="column.SportFileName !== '名次公告'">
                                    <el-button
                                      type="text"
                                      disabled
                                      class="report-noclick"
                                    ></el-button>
                                  </span>
                                  <span v-else>
                                    <el-button
                                      type="text"
                                      disabled
                                      class="rank-noclick"
                                    ></el-button>
                                  </span>
                                </template>
                              </el-col>
                              <el-col :span="6">
                                <div class="official-text" v-if="column.IsOfficial === '1'">
                                  （官方）
                                </div>
                              </el-col>
                            </el-col>
                          </el-row>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="VenueName" label="比赛地点" width="200px">
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div v-else style="margin-top:20px">
            <el-table :data="dateScheduleByDate[activeGroup]" :row-class-name="tableRowClassName">
              <el-table-column prop="BeginTime" label="时间" width="100px"> </el-table-column>
              <el-table-column label="比赛名称">
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.SportName + ' ' + scope.row.SportItemName + ' ' + scope.row.GameName
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="报表">
                <template slot-scope="scope">
                  <div class="table-report">
                    <el-row :gutter="24">
                      <el-col :span="24" v-for="(column, index) in scope.row.files" :key="index">
                        <el-col :span="6">
                          <div class="report-title" v-if="dateLine && column.IsXMLNull === '1'">
                            <span
                              @click="
                                goRoute(
                                  scope.row.SportName,
                                  column.SportFileName,
                                  scope.row.BeginTime,
                                  scope.row.SportItemName + ' ' + scope.row.GameName,
                                  scope.row.VenueName,
                                  column.FilePath,
                                  scope.row.SportItemCode
                                )
                              "
                            >
                              {{ column.SportFileName }}
                            </span>
                          </div>
                          <div class="report-title-noclick" v-else>
                            <el-button type="text" disabled>
                              <span>{{ column.SportFileName }}</span>
                            </el-button>
                          </div>
                        </el-col>
                        <el-col :span="3">
                          <div
                            v-if="dateLine && column.IsPDFNull === '1'"
                            class="report report-url"
                            @click="gotoUrl(column.FilePath)"
                          ></div>
                          <div v-else class="report-noclick"></div>
                        </el-col>
                        <el-col :span="6">
                          <div class="official-text" v-if="column.IsOfficial === '1'">
                            （官方）
                          </div>
                        </el-col>
                      </el-col>
                    </el-row>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="VenueName" label="比赛地点" width="200px"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Util from '@/assets/js/util'
import Storage from '@/assets/js/storage'
import moment from 'moment'

function concactArray(list1, list2) {
  return list1.concat(list2)
}

function createNumberArray(start, end, step, min, max) {
  var arr = Array.from({ length: Math.ceil((end - start + 1) / step) }, (_, i) => start + i * step)
  var resList = []
  arr.forEach(item => {
    if (item === min) {
      resList.push({
        value: item,
        flag: false,
        type: 'primary'
      })
    } else if (item > min && item <= max) {
      resList.push({
        value: item,
        flag: false,
        type: 'text'
      })
    } else {
      resList.push({
        value: item,
        flag: true,
        type: 'text'
      })
    }
  })
  return resList
}

export default {
  created() {
    this.activeGroup = Storage.get('activeGroup') || 'intelligence'
    this.getGroupData(this.activeGroup)
    this.getSingleDateSchedule()
    // this.getDailyGoldData()
  },
  mounted() {},
  data() {
    return {
      dateLine: moment('2023-12-31 23:59:59').diff(moment(), 'seconds') >= 0 ? true : false,
      activeGroup: 'intelligence',
      tabActive: 'October',
      dateList: createNumberArray(1, 31, 1, 26, 31),
      dateActive: null,
      orderType: 'item',
      itemList: [],
      itemAllList: {
        intelligence: [
          {
            itemName: '围棋',
            imgUrl: require('../../assets/img/daily/GO.png'),
            itemCode: 'GO'
          },
          {
            itemName: '象棋',
            imgUrl: require('../../assets/img/daily/CC.png'),
            itemCode: 'CC'
          },
          {
            itemName: '国际象棋',
            imgUrl: require('../../assets/img/daily/CH.png'),
            itemCode: 'CH'
          },
          {
            itemName: '桥牌',
            imgUrl: require('../../assets/img/daily/BR.png'),
            itemCode: 'BR'
          },
          {
            itemName: '五子棋',
            imgUrl: require('../../assets/img/daily/GB.png'),
            itemCode: 'GB'
          },
          {
            itemName: '国际跳棋',
            imgUrl: require('../../assets/img/daily/DR.png'),
            itemCode: 'DR'
          }
        ],
        public: [
          {
            itemName: '围棋',
            imgUrl: require('../../assets/img/daily/GO.png'),
            itemCode: 'PG'
          },
          {
            itemName: '象棋',
            imgUrl: require('../../assets/img/daily/CC.png'),
            itemCode: 'PC'
          },
          {
            itemName: '国际象棋',
            imgUrl: require('../../assets/img/daily/CH.png'),
            itemCode: 'PH'
          },
          {
            itemName: '桥牌',
            imgUrl: require('../../assets/img/daily/CH.png'),
            itemCode: 'PR'
          },
          {
            itemName: '五子棋',
            imgUrl: require('../../assets/img/daily/GB.png'),
            itemCode: 'PB'
          },
          {
            itemName: '国际跳棋',
            imgUrl: require('../../assets/img/daily/DR.png'),
            itemCode: 'PD'
          },
          {
            itemName: '掼牌（掼蛋）',
            imgUrl: null,
            itemCode: 'PE'
          }
        ],
        perform: [
          {
            itemName: '掼牌（掼蛋）',
            imgUrl: null,
            itemCode: 'WE'
          }
        ]
      },
      goResultList: [
        {
          time: '09:30',
          gameName: '专业（职业）男子个人 第1轮',
          report: [
            {
              name: '对阵表',
              url: 'http://hh.hhdata.cn:31288/Data/PDF/CHM00101_C51.pdf?dc=0.4483091119613034',
              status: 'official',
              filePath: 'GOM01001_C51',
              SportItemCode: 'GOM001'
            },
            {
              name: '名次公告',
              url: 'http://hh.hhdata.cn:31288/Data/PDF/CHM00101_C73.pdf?dc=0.2444548029295559',
              status: 'official',
              filePath: 'GOM00806_C92',
              SportItemCode: 'GOM001'
            }
          ],
          address: 'xx国际大酒店',
          status: ''
        },
        {
          time: '09:30',
          gameName: '专业（职业）男子个人 第1轮',
          report: [
            {
              name: '对阵表',
              url: 'http://hh.hhdata.cn:31288/Data/PDF/CHM00101_C51.pdf?dc=0.4483091119613034',
              status: 'official',
              code: 'MSGO01',
              filePath: 'GOM01001_C51'
            },
            {
              name: '成绩公告',
              url: 'http://hh.hhdata.cn:31288/Data/PDF/CHM00101_C73.pdf?dc=0.2444548029295559',
              status: 'unofficial',
              code: 'MRGO01',
              filePath: 'GOM01001_C73'
            }
          ],
          address: 'xx国际大酒店'
        }
      ],
      goldData: ''
    }
  },
  watch: {},
  computed: {
    ...mapState({
      dateScheduleByDate: state => state.schedule.dateScheduleByDate,
      dateScheduleByItem: state => state.schedule.dateScheduleByItem,
      scheduleByItemPerform: state => state.schedule.scheduleByItemPerform,
      activeItem: state => state.schedule.activeItem,
      dailyGoldData: state => state.schedule.dailyGoldData
    })
  },
  filters: {},
  components: {},
  methods: {
    changeOrderType() {},
    changeTab() {
      if (this.activeGroup === 'intelligence') {
        if (this.tabActive === 'October') {
          this.dateList = createNumberArray(1, 31, 1, 26, 31)
          if (this.dateActive < 26 && this.dateActive !== 18 && this.dateActive !== 19) {
            this.dateActive = 26
          }
        } else if (this.tabActive === 'November') {
          this.dateList = createNumberArray(1, 30, 1, 1, 4)
          if (this.dateActive > 4) {
            this.dateActive = 1
          }
        }
      } else if (this.activeGroup === 'public') {
        if (this.tabActive === 'October') {
          this.dateList = concactArray(
            createNumberArray(1, 26, 1, 26, 26),
            createNumberArray(27, 31, 1, 30, 31)
          )
          if (this.dateActive < 26 && this.dateActive !== 18 && this.dateActive !== 19) {
            this.dateActive = 26
          }
        } else if (this.tabActive === 'November') {
          this.dateList = createNumberArray(1, 30, 1, 1, 3)
          if (this.dateActive > 4) {
            this.dateActive = 1
          }
        }
      } else if (this.activeGroup === 'perform') {
        this.dateList = createNumberArray(1, 31, 1, 18, 19)
        this.dateActive = 18
      }
      this.changeDate(this.dateActive)
    },
    changeDate(date) {
      this.dateActive = date
      this.dateList.forEach(item => {
        if (item.value === date) {
          item.type = 'primary'
        } else {
          item.type = 'text'
        }
      })
      this.getSingleDateSchedule()
      this.getDailyGoldData()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'table-row-class'
      }
    },
    getTableData(itemCode) {
      return this.scheduleByItemPerform[itemCode]
    },
    gotoUrl(path) {
      if (path) {
        window.open('/api/PDF/' + path + '.PDF')
      }
    },
    goRoute(itemName, sportFileName, gameTime, gameTitle, venueName, filePath, SportItemCode) {
      let routeData = this.$router.resolve({
        name: 'itemReport',
        query: {
          activeItemName: itemName.includes('掼') ? '掼蛋' : itemName,
          sportFileName: sportFileName,
          gameTime: gameTime,
          gameTitle: gameTitle,
          venueName: venueName,
          filePath: filePath,
          SportItemCode: SportItemCode
        }
      })
      window.open(routeData.href)
    },
    getGroupData(data) {
      this.activeGroup = data
      if (this.activeGroup === 'perform') {
        this.tabActive = 'October'
      } else {
        let month = moment().format('MM') === '10' ? 'October' : 'November'
        let day = parseInt(moment().format('DD'))
        this.tabActive = this.$route.query.tabActive || month
        this.dateActive = parseInt(this.$route.query.dateActive) || day
      }
      this.changeTab()
    },
    getSingleDateSchedule() {
      let params =
        this.tabActive === 'October'
          ? '2023-10-' + this.dateActive.toString()
          : '2023-11-0' + this.dateActive.toString()
      this.$store
        .dispatch('getSingleDateSchedule', 'ByDate_' + params + '/Data.json')
        .then(_ => {
          this.itemList = []
          this.itemAllList[this.activeGroup].forEach(item => {
            console.log(this.activeItem)
            if (this.activeItem[this.activeGroup].includes(item.itemName)) {
              this.itemList.push(item)
            }
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    getDailyGoldData() {
      this.$store
        .dispatch('getDailyGoldData')
        .then(_ => {
          if (this.tabActive === 'October') {
            this.dailyGoldData[this.activeGroup].forEach(item => {
              if (item.Date === '10-' + this.dateActive.toString()) {
                this.goldData = item.PassGold + '/' + item.Gold
              }
            })
          } else {
            this.dailyGoldData[this.activeGroup].forEach(item => {
              if (item.Date === '11-0' + this.dateActive.toString()) {
                this.goldData = item.PassGold + '/' + item.Gold
              }
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/daily.scss';
</style>
